<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>后台管理模板</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">

<link rel="stylesheet"
	href="@{'public/plugins/layui_new/css/layui.css'}" media="all" />
<link rel="stylesheet" href="@{'public/css/global.css'}" media="all">
<link rel="stylesheet" href="@{'public/css/style.min.css'}" media="all">
<link rel="stylesheet" type="text/css"
	href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link href="@{'public/css/dropzone.min.css'}" rel="stylesheet">
<link rel="stylesheet" href="@{'/public/css/sweetalert2.min.css'}">

<script src="@{'public/js/jquery-2.1.4.min.js'}"></script>
<script src="@{'public/js/dropzone.min.js'}"></script>
<script src="@{'public/js/clipboard.min.js'}"></script>
<script src="@{'public/plugins/layui_new/layui.js'}"></script>
<script src="@{'public/js/sweetalert2.min.js'}"></script>


<style>
.attach-img {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	box-shadow: 0px 0px 8px #333;
}

.attach-img:hover {
	background-color: #f9f9f9;
}

body {
	padding-bottom: 50px;
}

.fixed {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #FFFFFF;
	z-index: 9999;
	text-align: center;
}
</style>

<script type="text/javascript">
	var layer;

	layui.use([ 'layer', 'form' ], function() {
		layer = layui.layer, form = layui.form;

	});

	var map = {};
	var index = 1;
	var maxIndex = ${maxIndex};

	$(function() {

		//注意：parent 是 JS 自带的全局对象，可用于操作父页面
		var win_index = parent.layer.getFrameIndex(window.name); //获取窗口索引

		//给父页面传值
		$('#transmit').on('click', function() {

			//parent.$('#parentIframe').text('我被改变了');
			parent.map = map;
			parent.index = index;
			parent.layer.close(win_index);
		});

	});

	//点击图片之后的顺序排序
	function clickImg(obj) {

		
			if ($(obj).children('span').length > 0) {
				
				
				var index_1 = parseInt($(obj).children('span').text());

				$(obj).children('span').remove()
				map[$(obj).children('img').attr("value")] = 0
				index--;

				for (var i = 0; i < $('.img_divs').length; i++) {

					if ($($('.img_divs a')[i]).children('span').text() > 1) {

						if (parseInt($($('.img_divs a')[i]).children('span')
								.text()) > index_1) {

							$($('.img_divs a')[i]).children('span').text(
									parseInt($($('.img_divs a')[i]).children(
											'span').text()) - 1);

							map[$($('.img_divs a')[i]).children('img').attr(
									"value")] = map[$($('.img_divs a')[i])
									.children('img').attr("value")] - 1

						}

					}
				}

			} else {

				
			if (index <= maxIndex) {
				map[$(obj).children('img').attr("value")] = index;

				$(obj)
						.append(
								'<span  class="layui-badge">' + index
										+ '</span>');
				index += 1;

			}
		}
	}
</script>


</head>


<body>


	<div style="float: left;">
		<div class="m-b-30">
			<form action="#" class="dropzone" id="dropzone">
				<div class="fallback">
					<input name="file" type="file" multiple="multiple">
				</div>
				<div class="dz-message">
					<p>将文件拖至此处或点击上传</p>
				</div>
			</form>
		</div>





		<div class="col-md-12 attach">
			#{if list==null}
			<div class="row">
				<div class="col-md-4 text-center">
					<div class="alert alert-warning">目前还没有一个附件呢，你可以上传试试!</div>
				</div>
			</div>


			#{/if} #{list list ,as:'item'}


			<div class="col-md-2 text-center m-t-10 img_divs"
				style="float: left;">

				<a href="javascript:void(0);" onclick="clickImg(this);"> <img
					class="attach-img" src="http://industrial.b0.upaiyun.com${item}"
					title="11" value="${item}" />
				</a>

			</div>

			#{/list}

		</div>

	</div>


	<div class="fixed">
		<button class="layui-btn" id="transmit">确定</button>
		<button class="layui-btn layui-btn-warm" id="closeIframe">取消</button>
	</div>

	<script>
		var tale = new $.tale();
		$("#dropzone").dropzone({
			url : "@{manage.upload()}",
			filesizeBase : 1024,//定义字节算法 默认1000
			maxFiles : 10,//最大文件数量
			maxFilesize : 20, //MB
			fallback : function() {
				tale.alertError('暂不支持您的浏览器上传!');
			},
			uploadMultiple : true,
			dictFileTooBig : '您的文件超过20MB!',
			dictInvalidInputType : '不支持您上传的类型',
			dictMaxFilesExceeded : '您的文件超过10个!',
			init : function() {
				this.on('queuecomplete', function(files) {
					tale.alertOkAndReload('上传成功');

				});
				this.on('error', function(a, errorMessage, result) {
					if (!result.success && result.msg) {
						tale.alertError(result.msg || '上传失败');
					}
				});
				this.on('maxfilesreached', function() {
					this.removeAllFiles(true);
					tale.alertWarn('文件数量超出限制');
				});
			}
		})
	</script>
</body>

</html>

